<extend name="Common/back" xmlns="http://www.w3.org/1999/html"/>
<block name="content">
    <div id="content">
        <div class="page-header">
            <div class="container-fluid">
                <div class="pull-right">
                    <button type="submit" form="form-set" data-toggle="tooltip" title="保存"
                            class="btn btn-primary">
                        <i class="fa fa-save"></i>
                    </button>
                    <a href="{:U('list')}" data-toggle="tooltip" title="取消" class="btn btn-default">
                        <i class="fa fa-reply"></i>
                    </a>
                </div>
                <h1>属性</h1>
                <ul class="breadcrumb">
                    <li>
                        <a href="{:U('Manage/index')}">首页</a>
                    </li>
                    <li>
                        <a href="javascript:;">属性</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="container-fluid">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        <i class="fa fa-pencil"></i>
                        设置属性
                    </h3>
                </div>
                <div class="panel-body">
                    <form action="{:U('set')}" method="post" enctype="multipart/form-data" id="form-set"
                    class="form-horizontal">
                        <if condition="isset($data['attribute_id'])">
                            <input type="hidden" name="attribute_id" value="{$data['attribute_id']}"
                                   id="input-attribute_id">
                        </if>
                        <ul class="nav nav-tabs">
                            <li class="active">
                                <a href="#tab-general" data-toggle="tab">基本信息</a>
                            </li>
                        </ul>
                        <div class="tab-content">
                            <div class="tab-pane active" id="tab-general">

                                <div class="form-group">
                <label class="col-sm-2 control-label" for="input-attribute_title">属性</label>
                  <div class="col-sm-10">
                 <input type="text" class="form-control" placeholder="属性"
                 name="attribute_title" id="input-attribute_title" value="{$data['attribute_title']}"/>
                 <if condition="isset($message['attribute_title'])">
                 <label for="input-attribute_title" class="text-danger">{$message['attribute_title']}</label>
              </if>
             </div>
            </div><div class="form-group">
                <label class="col-sm-2 control-label" for="input-type_id">类型</label>
                  <div class="col-sm-10">
                 <select  class="form-control"
                 name="type_id" id="input-type_id" >
                     <volist name="type_list" id="type">
                         <option value="{$type['type_id']}" <if condition="$type['type_id'] eq
             $data['type_id']">selected</if> >{$type['type_title']}

                         </option>
                     </volist>
                 </select>
                 <if condition="isset($message['type_id'])">
                 <label for="input-type_id" class="text-danger">{$message['type_id']}</label>
              </if>
             </div>
            </div>

            <div class="form-group">
            <label class="col-sm-2 control-label" for="input-input_type_id">输入类型</label>
            <div class="col-sm-10">
            <select  class="form-control" name="input_type_id" id="input-input_type_id" >
             <volist name="input_type_list" id="input_type">
              <option value="{$input_type['input_type_id']}"
               <if condition="$input_type['input_type_id'] eq  $data['input_type_id']">selected
               </if> >{$input_type['type_title']}</option></volist></select>
                   <if condition="isset($message['input_type_id'])">
                  <label for="input-input_type_id" class="text-danger">{$message['input_type_id']}</label>
                  </if>
               </div>
            </div>




                               <div class="form-group" id="row-options">
                                    <label class="col-sm-2 control-label" for="input-sort_number">预设值</label>
                                    <div class="col-sm-10">
                                        <table id="table-options"
                                               class="table table-striped table-bordered table-hover">
                                            <thead>
                                            <tr>
                                                <td class="text-left">选项</td>
                                                <td class="text-left">排序</td>
                                                <td class="text-right">操作</td>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr>
                                                <td class="text-left">
                                                    <input id="option-option_value"
                                                           name="" value="" placeholder="选项" class="form-control" type="text">
                                                </td>
                                                <td class="text-left">
                                                    <input id="option-sort_number" name="" value="0" placeholder="排序"
                                                           class="form-control" type="text">
                                                </td>
                                                <td class="text-right"><button class="btn btn-default" id="button-add">添加</button></td>
                                            </tr>

                                            <volist name="option_list" id="option">
                                                <tr>
                                                    <td class="text-left">
                                                        <input type="hidden" name="option[{$key}][attribute_option_id]"
                                                               value="{$option['attribute_option_id']}">
                                                        <input name="option[{$key}][option_value]" value="{$option['option_value']}"
                                                               placeholder="选项" class="form-control" type="text">
                                                    </td>
                                                    <td class="text-left">
                                                        <input name="option[{$key}][sort_number]" value="{$option['sort_number']}"
                                                               placeholder="排序" class="form-control" type="text">
                                                    </td>
                                                    <td class="text-right"><button class="btn btn-default">删除</button></td></tr>
                                            </volist>

                                            </tbody>
                                        </table>
                                    </div>
                                </div>



              <div class="form-group">
                <label class="col-sm-2 control-label" for="input-sort_number">排序</label>
                  <div class="col-sm-10">
                 <input type="text" class="form-control" placeholder="排序"
                 name="sort_number" id="input-sort_number" value="{$data['sort_number']}"/>
                 <if condition="isset($message['sort_number'])">
                 <label for="input-sort_number" class="text-danger">{$message['sort_number']}</label>
              </if>
             </div>
            </div>

                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</block>
<block name="appendJs">
    <script src="__PUBLIC__/Back/validate/jquery.validate.min.js"></script>
    <script src="__PUBLIC__/Back/validate/additional-methods.min.js"></script>
    <script src="__PUBLIC__/Back/validate/localization/messages_zh.min.js"></script>

    <script>
    // 表单的JS验证
        $(function(){
            $('#form-set').validate({});
        });
    </script>



    <script>
        $(function() {
            // 刚刚加载完毕, 处理显示或者隐藏 属性预设值的面板
            if ($('#input-input_type_id').find('option:selected:eq(0)').text() == 'select-multi') {
                $('#row-options').show();
            } else {
                $('#row-options').hide();
            }

            // 更改输入类型时判断
            $('#input-input_type_id').change(function(evt) {
                if ($(this).find('option:selected:eq(0)').text() == 'select-multi') {
                    $('#row-options').show();
                } else {
                    $('#row-options').hide();
                }
            });


            // 选项初始化索引
            var optionIndex = $('#table-options>tbody>tr').size() - 1;
            $('#button-add').click(function(evt) {
                // 拼凑tr, 显示内容
                var html = '<tr>' +
                    '<td class="text-left">' +
                    '<input name="option[' + optionIndex +
                    '][option_value]" value="' + $('#option-option_value').val() +
                    '" placeholder="选项" class="form-control" type="text">' +
                    '</td>' +
                    '<td class="text-left">' +
                    '<input name="option[' + optionIndex +
                    '][sort_number]" value="' + $('#option-sort_number').val() +
                    '" placeholder="排序" class="form-control" type="text">' +
                    '</td>' +
                    '<td class="text-right">' +
                    '<button class="btn btn-default">删除</button>' +
                    '</td>' +
                    '</tr>';
                // 追加到table
                $('#table-options>tbody').append(html);

                // 重置添加元素
                $('#option-option_value').val('');
                $('#option-sort_number').val('0');

                // 累加计数器
                ++ optionIndex;

                evt.preventDefault();
            });

        });
    </script>

</block>
